<script setup>
import {
  computed,
  ref,
} from 'vue'

const props = defineProps({
  total: {
    type: Number,
    required: true,
  }, // 总条数
  pageNo: {
    type: Number,
    required: true,
  }, // 当前页码
  pageSize: {
    type: Number,
    required: true,
  }, // 每页条数
  pageSizeOptions: {
    type: Array,
    default: () => [10, 20, 50, 100],
  }, // 可选每页条数
})

const emit = defineEmits(['update:pageNo', 'update:pageSize'])

const totalPages = computed(() => Math.ceil(props.total / props.pageSize)) // 总页数
const pageSize = ref(props.pageSize)
const jumpPage = ref(props.pageNo)

// 计算可见页码（最多显示5个页码按钮）
const visiblePages = computed(() => {
  const pages = []
  const maxPagesToShow = 5
  let start = Math.max(1, props.pageNo - 2)
  const end = Math.min(totalPages.value, start + maxPagesToShow - 1)

  if (end - start < maxPagesToShow - 1) {
    start = Math.max(1, end - maxPagesToShow + 1)
  }

  for (let i = start; i <= end; i++) {
    pages.push(i)
  }
  return pages
})

// 处理分页切换
const prevPage = () => changePage(props.pageNo - 1)
const nextPage = () => changePage(props.pageNo + 1)

function changePage(page) {
  if (page >= 1 && page <= totalPages.value) {
    emit('update:pageNo', page)
    jumpPage.value = page
  }
}

// 处理跳转页码
function goToPage() {
  const page = Number.parseInt(jumpPage.value)
  if (page >= 1 && page <= totalPages.value) {
    changePage(page)
  }
  else {
    jumpPage.value = props.pageNo
  }
}

// 处理每页条数改变
function changePageSize(event) {
  pageSize.value = Number.parseInt(event.target.value) // 更新 pageSize
  emit('update:pageSize', pageSize.value)
  emit('update:pageNo', 1) // 改变每页条数后回到第一页
}
</script>

<template>
  <view class="pagination">
    <!-- 总条数 -->
    <span class="total">共 {{ total }} 条</span>
    <!-- 上一页按钮 -->
    <wd-button size="small" :round="false" :disabled="pageNo <= 1" custom-class="custom-shadow" @click="prevPage">
      <wd-icon name="arrow-left" size="10px" />
    </wd-button>

    <!-- 页码 -->
    <wd-button
      v-for="page in visiblePages" :key="page" size="small" :round="false"
      :type="pageNo === page ? 'success' : 'primary'" @click="changePage(page)"
    >
      {{ page }}
    </wd-button>

    <!-- 下一页按钮 -->
    <wd-button
      size="small" :round="false" :disabled="pageNo >= totalPages" custom-class="custom-shadow"
      @click="nextPage"
    >
      <wd-icon name="arrow-right" size="10px" />
    </wd-button>

    <!-- 跳转输入 -->
    <span>前往</span>
    <input v-model="jumpPage" type="number" class="jump-input" @keyup.enter="goToPage">
    <span>页</span>
  </view>
</template>

<style scoped lang="scss">
	.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
}

.total {
  margin-right: 10px;
}

.page-size {
  padding: 5px;
  border: 1px solid #ddd;
}

:deep() {
  .custom-shadow {
    // width: 10px;
    // height: 8px;
    // padding: 10px 10px;
    // /* 适当增加按钮大小 */
    box-shadow:
      0 3px 1px -2px rgb(0 0 0 / 20%),
      0 2px 2px 0 rgb(0 0 0 / 14%),
      0 1px 5px 0 rgb(0 0 0 / 12%);
  }
}

.jump-input {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  text-align: center;
  border: 1px solid #ddd;
  padding: 3px;
}
</style>
